.pe-button {
    --pe-button-bg-color: var(--pe-color-white);
    --pe-button-text-color: var(--pe-color-text);
    --pe-button-border-color: var(--pe-color-border);
    --pe-button-hover-bg-color: var(--pe-color-hover-default);
    --pe-button-font-size: var(--pe-font-size-default);
    --pe-button-width: auto;
    --pe-button-height: var(--pe-default-height);
    --pe-button-border-radius: var(--pe-border-radius);
    --pe-button-padding: var(--pe-padding-default)
}

.pe-button {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: var(--pe-button-width);
    height: var(--pe-button-height);
    padding: var(--pe-button-padding);
    background-color: var(--pe-button-bg-color);
    border: 1px solid var(--pe-button-border-color);
    cursor: pointer;
    border-radius: var(--pe-button-border-radius);
    color: var(--pe-button-text-color);
    font-size: var(--pe-button-font-size);
    overflow: hidden;
    vertical-align: middle;
    outline: none;
    .pe-button-icon {
        display: inline-flex;
        align-items: center;
        height: 100%;
    }
    
    .pe-button-content {
        display: inline-flex;
        margin: 0 5px;
        align-items: center;
    }
}

.pe-button+.pe-button {
    margin-left: var(--pe-margin-left);
}

.pe-button:hover {
    background-color: var(--pe-button-hover-bg-color);
}

.pe-button-type-primary {
    --pe-button-bg-color: var(--pe-color-primary);
    --pe-button-text-color: var(--pe-color-white);
    --pe-button-border-color: var(--pe-color-primary);
    --pe-button-hover-bg-color: var(--pe-color-hover-primary);
}

.pe-button-type-success {
    --pe-button-bg-color: var(--pe-color-success);
    --pe-button-text-color: var(--pe-color-white);
    --pe-button-border-color: var(--pe-color-success);
    --pe-button-hover-bg-color: var(--pe-color-hover-success);
}

.pe-button-type-info {
    --pe-button-bg-color: var(--pe-color-info);
    --pe-button-text-color: var(--pe-color-white);
    --pe-button-border-color: var(--pe-color-info);
    --pe-button-hover-bg-color: var(--pe-color-hover-info);
}

.pe-button-type-warning {
    --pe-button-bg-color: var(--pe-color-warning);
    --pe-button-text-color: var(--pe-color-white);
    --pe-button-border-color: var(--pe-color-warning);
    --pe-button-hover-bg-color: var(--pe-color-hover-warning);
}

.pe-button-type-error {
    --pe-button-bg-color: var(--pe-color-error);
    --pe-button-text-color: var(--pe-color-white);
    --pe-button-border-color: var(--pe-color-error);
    --pe-button-hover-bg-color: var(--pe-color-hover-error);
}

.pe-button-round {
    --pe-button-border-radius: calc(var(--pe-button-height) / 2);
}

.pe-button-circle {
    --pe-button-width: var(--pe-button-height);
    --pe-button-border-radius: calc(var(--pe-button-height) / 2);
    --pe-button-padding: 0;
}

.pe-button-size-large {
    --pe-button-height: var(--pe-large-height);
    --pe-button-font-size: var(--pe-font-size-large);
    --pe-button-padding: var(--pe-padding-large);
}

.pe-button-size-small {
    --pe-button-height: var(--pe-small-height);
    --pe-button-font-size: var(--pe-font-size-small);
    --pe-button-padding: var(--pe-padding-small);
}